import { Inject,Component } from '@angular/core';
import { ReduxStore } from '../store/store';

import { Store } from 'redux';
import { Thread } from '../models';
import { ThreadActions } from '../actions';
import { ReduxState , getCurrentThread, getAllThreads } from '../reducers'; 
import ChatThread from '../components/ChatThread';


@Component({
  selector: 'chat-threads',
  template: `
  <!-- conversations -->
  <div class="row">
    <div class="conversation-wrap">
      <chat-thread
           *ngFor="let thread of threads"
           [thread]="thread"
           [selected]="thread.id === currentThreadId"
           (onThreadSelected)="handleThreadClicked($event)">
      </chat-thread>
    </div>
  </div>
  `
})

export default class ChatThreads {
  threads: Thread[];
  currentThreadId: string;

  constructor(@Inject(ReduxStore) private store: Store<ReduxState>) {
    store.subscribe(() => this.updateState());
    this.updateState();
  }

  updateState() {
    let state = this.store.getState();
    // Store the threads list
     this.threads = getAllThreads(state);
     // console.log(this.threads);
    // We want to mark the current thread as selected,
    // so we store the currentThreadId as a value
     this.currentThreadId = getCurrentThread(state).id;
  }

  handleThreadClicked(thread: Thread) {
    // this.store.dispatch(ThreadActions.selectThread(thread));
  }
}
